<template>
    <div>
        <a-row :class="['p-4', `ltrt-box`]" :gutter="10">
            <a-col :xl="6" :lg="8" :md="10" :sm="24" style="flex: 1">
                <a-card :bordered="false" style="height: 100%">
                    <LeftTree @select="onTreeSelect" />
                </a-card>
            </a-col>
            <a-col :xl="18" :lg="16" :md="14" :sm="24" style="flex: 1">
                <BasicTable @register="registerTable" :rowSelection="rowSelection">
                    <!--table标题插槽-->
                    <template #tableTitle>
                        <a-button type="primary" v-auth="['demo:ltrt:add']" :preIcon="IconEnum.ADD" @click="handleAdd">{{ t('action.create') }}</a-button>
                        <a-button type="primary" v-auth="['demo:ltrt:import']" :preIcon="IconEnum.IMPORT" @click="handleImport">{{
                            t('action.import')
                            }}</a-button>
                        <a-button type="primary" v-auth="['demo:ltrt:export']" :preIcon="IconEnum.EXPORT" @click="onExportXls">{{ t('action.export') }}</a-button>
                        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="openTab">打开Tab页</a-button>
                        <a-dropdown v-if="selectedRowKeys.length > 0">
                            <template #overlay>
                                <a-menu>
                                    <a-menu-item key="1" @click="handleBatchDelete">
                                        <Icon :icon="IconEnum.DELETE"></Icon>
                                        {{ t('action.delete') }}
                                    </a-menu-item>
                                </a-menu>
                            </template>
                            <a-button
                            >{{ t('action.batchOpt') }}
                                <Icon icon="ant-design:down-outlined"></Icon>
                            </a-button>
                        </a-dropdown>
                    </template>
                    <!--操作栏插槽-->
                    <template #action="{ record }">
                        <TableAction :actions="getActions(record)" />
                    </template>
                    <!--字段回显插槽-->
    <!--字段回显插槽-->
    <template v-slot:bodyCell="{ column,text }">
        <!--超链接处理,先写个demo,后面可能用到.参考网址:https://blog.csdn.net/u014458962/article/details/106758063-->
        <template v-if="column.dataIndex === 'textInput'">
            <a href="http://www.baidu.com" target="_blank">{{ text }}</a>
        </template>
        <!--多标签处理,先写个demo,后面可能用的到.参考网址:https://blog.csdn.net/u014458962/article/details/106758063-->
        <template v-if="column.dataIndex === 'selectMulti'">
            <a-tag v-for="tag in tags" :key="tag" :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
                {{ tag.toUpperCase() }}
            </a-tag>
        </template>
        <template v-if="column.dataIndex==='uploadFile'">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
            <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">{{ t('action.download') }}</a-button>
        </template>
        <template v-if="column.dataIndex==='pca1'">
            {{ getAreaTextByCode(text) }}
        </template>
        <template v-if="column.dataIndex==='pca2'">
            {{ getAreaTextByCode(text) }}
        </template>
    </template>
                </BasicTable>
            </a-col>
            <LtrtModal @register="registerModal" @success="reload" />
            <JImportModal @register="registerModalJimport" :url="getImportUrl" online />
        </a-row>
    </div>
</template>
<script lang="ts" name="demo-ltrt" setup>
    import { useDesign } from '/@/hooks/web/useDesign';
    import LeftTree from '/@/views/demo/tree/components/leftTree.vue';
    import { ref, unref, onMounted, computed,watch} from 'vue';
    import { useI18n } from '@/hooks/web/useI18n';
    import { IconEnum } from '@/enums/appEnum';
    import { BasicTable, TableAction } from '/@/components/Table';
    import { useModal } from '/@/components/Modal';
    import { getPage, deleteById, batchDelete, getExportUrl, getImportUrl } from './ltrt.api';
    import { columns, searchFormSchema } from './ltrt.data';
    import LtrtModal from './LtrtModal.vue';
    import JImportModal from '/@/components/Form/src/jeecg/components/JImportModal.vue';
    import { useListPage } from '/@/hooks/system/useListPage';
    import { getAreaTextByCode } from '/@/components/Form/src/utils/Area';
    import { useGo } from '/@/hooks/web/usePage';
    const [registerModal, { openModal }] = useModal();
    const [registerModalJimport, { openModal: openModalJimport }] = useModal();
    const { t } = useI18n();
    const go = useGo();

    // 当前选中的树节点
    const checkedTreeNodeData = ref('');
    // 列表页面公共参数、方法
    const { onExportXls, onImportXls, tableContext, createMessage } = useListPage({
        designScope: 'ltrt-template',
        tableProps: {
            title: '左树右表demo列表',
            api: getPage,
            columns: columns,
            useSearchForm: true,
            size: 'small', //紧凑型表格
            formConfig: {
                labelWidth: 60,
                autoSubmitOnEnter: true,
                schemas: searchFormSchema,
                fieldMapToNumber: [
                            ['numberInput', ['numberInputBegin', 'numberInputEnd']],
                ],
                fieldMapToTime: [
                            ['dateYmd', ['dateYmdBegin', 'dateYmdEnd'], 'YYYY-MM-DD'],
                            ['dateYmdhms', ['dateYmdhmsBegin', 'dateYmdhmsEnd'], 'YYYY-MM-DD'],
                            ['dateHms', ['dateHmsBegin', 'dateHmsEnd'], 'YYYY-MM-DD'],
                ],
            },
            actionColumn: {
                width: 180,
            },
            // 请求之前对参数做处理
            beforeFetch: (params) => {
                params.treeId = checkedTreeNodeData.value;
            },
            showIndexColumn: true,
        },
        exportConfig: {
            name: '左树右表demo列表',
            url: getExportUrl,
        },
        importConfig: {
            url: getImportUrl,
        },
    });

    const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;

    // 左侧树选择后触发
    function onTreeSelect(data) {
        checkedTreeNodeData.value = data.id;
        reload();
    }

    /**
     * 操作列定义
     * @param record
     */
    function getActions(record) {
        return [
            {
                label: t('action.edit'),
                auth:'demo:ltrt:edit',
                onClick: handleEdit.bind(null, record),
            },
            {
                label: t('action.delete'),
                auth:'demo:ltrt:delete',
                popConfirm: {
                    title: t('common.delMessage'),
                    placement: 'left',
                    confirm: handleDelete.bind(null, record),
                },
            },
        ];
    }
    /**
     * 打开导入弹框
     */
    function handleImport() {
        openModalJimport(true);
    }
    /**
     * 打开tab页面
     */
    function openTab() {
        go(`/comp/jeecg/basic`);
    }

    /**
     * 新增事件
     */
    function handleAdd() {
        if (!checkedTreeNodeData.value) {
            createMessage.warning('请先选择树表管理');
        } else {
            openModal(true, {
                isUpdate: false,
                treeId: checkedTreeNodeData.value,
            });
        }
    }

    /**
     * 编辑事件
     */
    function handleEdit(record) {
        openModal(true, {
            record,
            isUpdate: true,
        });
    }

    /**
     * 删除事件
     */
    async function handleDelete(record) {
        await deleteById({ id: record.id }, reload);
    }

    /**
     * 批量删除事件
     */
    async function handleBatchDelete() {
        await batchDelete({ ids: selectedRowKeys.value }, reload);
    }
</script>

